<template>
	<div id="textChange">
		<div class="textChange_top">
			<i class="el-icon-arrow-left" @click="goBack"></i>
			<p class="top_title">添加笔记</p>
			<i class="el-icon-check" @click="keep"></i>
		</div>
		<div class="textChange_bd">
			<div class="textChange_bd_1">
				<div class="textChange_bd_title">
					<span class="bd_title">标题：</span>
					<input type="" name="" id="" :value="title" class="inp1" />
				</div>
				<div class="textChange_bd_editor">
					<quill-editor v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { quillEditor } from 'vue-quill-editor'
	import $ from 'jquery'
	export default {
		name: 'textChange',
		data() {
			return {
				content: '',
				title: '',
				folderId:'',
				newcontent:'',
				editorOption: { // 定义富文本编辑器显示
					//			      modules:{
					//			      toolbar:[
					//			       ['bold','italic','underline','strike'], // 加粗、倾斜、下划线、删除线
					//			 
					//			       [{'header':1},{'header':2}], // 标题一、标题二
					//			       [{'list':'ordered'},{'list':'bullet'}], // 列表
					//			 
					//			       [{'color':[]},{'background':[]}], // 字体颜色、背景颜色
					//			      ]
					//			     }
				}
			}
		},
		methods: {
			onEditorBlur(val, editor) { //失去焦点事件 
				console.log(val);
			},
			onEditorFocus(val) { //获得焦点事件
				console.log(val)
			},
			onEditorChange({
				editor,
				html,
				text
			}) { //编辑器文本发生变化
				//this.content可以实时获取到当前编辑器内的文本内容
				this.newcontent = this.content;

			},
			goBack() {
				history.back(-1)
			},
			keep() {
				let val = $(".inp1").val();
				let newcontent = this.newcontent;
				let desc = newcontent.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, '').replace(/<[^>]+?>/g, '').replace(/\s+/g, ' ').replace(/ /g, ' ').replace(/>/g, ' ');
				let res = '';
				let code = '';
				let _this = this;
				if(this.$util.isEmpty(val)) {
					this.$message({
						message: '标题不能为空'
					});
				} else {
					this.$confirm('是否保存?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						let params = {
							name: val,
							content: newcontent,
							desc: desc,
							pid:this.folderId,
							type:"1"
						}
						this.$post("/app/post/AppMyNoteController/addNoteContent", params).then((json) => {
							if(json.returnCode == 0) {
								this.$message({
									type: 'success',
									message: '保存成功!',
							});
							} else {
								this.$message({
									message: json.returnMessage
								});
							}
							history.back(-1);
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消保存'
						});
					});
				}
			},
		},
		created(){
//				debugger
				this.folderId = this.$route.query.thisfolderId
		}
	}
</script>

<style>
	#textChange {
		width: 100%;
		height: 100%;
		font-size: 0.14rem;
	}
	
	.textChange_top {
		width: 100%;
		height: 0.45rem;
		position: fixed;
		z-index: 999;
		display: flex;
		background-color: lightblue;
	}
	
	.el-icon-arrow-left {
		font-size: 0.3rem;
		margin-top: 0.1rem;
		margin-left: 0.1rem;
	}
	
	.top_title {
		width: 2.8rem;
		font-size: 0.2rem;
		padding-top: 0.1rem;
		text-align: center;
	}
	
	.el-icon-check {
		font-size: 0.25rem;
		margin-top: 0.1rem;
		margin-left: 0.1rem;
	}
	
	.el-message-box {
		width: 90%;
	}
	
	.textChange_bd {
		width: 100%;
		height: 100%;
		padding-top: 0.45rem;
	}
	
	.textChange_bd_1 {
		width: 100%;
		height: 3rem;
	}
	
	.textChange_bd_title {
		width: 100%;
		height: 0.5rem;
		display: flex;
		margin-top: 10px;
		background-color: white;
	}
	
	.bd_title {
		width: 1rem;
		font-size: 0.2rem;
		text-align: center;
		padding-top: 0.1rem;
	}
	
	.inp1 {
		width: 2rem;
		height: 0.3rem;
		margin-top: 0.05rem;
		font-size: 0.15rem;
		padding-top: 0.05rem;
		padding-left: 0.1rem;
		border: 1px solid gainsboro;
	}
	
	.textChange_bd_edit {
		width: 100%;
		height: 100%;
		background-color: white;
	}
</style>